<div>
    <form class="form-horizontal" role="form" novalidate name="stForm" ng-switch on="translate.timeTypeCode.timeTypeCode">
        <div class="form-ctrl md-whiteframe-z1">
            <div class="form-search" style="height:225px;" ng-class="{true: 'shou'}[shoumun==0]">
                <div>
                    <label style="width:70px">归属省</label>
                    <md-select multiple ng-model="robot.province">
                        <md-select-label>
                            {{robot.province.length ? _getNames(robot.province,'provinceName',provinces) :'全部'}}
                        </md-select-label>
                        <md-option ng-value="" ng-click="_checkAll(robot,'province')">全部</md-option>
                        <md-option ng-value="province" ng-repeat="province in provinces">{{province.provinceName}}</md-option>
                    </md-select>
                </div>
                <div>
                    <md-input-container flex>
                        <label>开始时间</label>
                        <input type="date" time-validate='day' end-time='date.endTime' name='startTime' ng-model="date.startTime"  required>
                        <div ng-messages="stForm.startTime.$error">
                            <div ng-message="date">请正确输入时间</div>
                            <div ng-message="time-error">开始时间不应大于结束时间</div>
                            <div ng-message="too-great">结束时间不应大于当前时间</div>
                        </div>
                    </md-input-container>
                </div>
                <div>
                    <md-input-container flex>
                        <label>结束时间</label>
                        <input type="date" time-validate="day" start-time="date.startTime" name='endTime' ng-model="date.endTime"  required>
                        <div ng-messages="stForm.endTime.$error">
                            <div ng-message="date">请正确输入时间</div>
                            <div ng-message="time-error">开始时间不应大于结束时间</div>
                            <div ng-message="too-great">结束时间不应大于当前时间</div>
                        </div>
                    </md-input-container>
                </div>
            </div>
            <i class="glyphicon glyphicon-chevron-up shrinkage" ng-click="shoumun=0"></i>
            <md-button ng-click="queryAllChannel()" ng-click="shoumun==1?shoumun=0:shoumun=1" class="md-fab md-primary md-hue-1" ng-disabled='stForm.$invalid' aria-label="Profile">
                <i class="glyphicon glyphicon-arrow-down" style="margin-top:28px;" ng-show="shoumun==0"></i>
                <i class="glyphicon glyphicon-search" ng-show="shoumun==1"></i>
            </md-button>
        </div>
    </form>
    <div class="menus table-info">
        <md-button aria-label="列表" class="md-raised ico-btn" ng-click="lengthSwitch=false">
            <img src="images/tables.png">
        </md-button>
        <md-button aria-label="图表" class="md-raised ico-btn" ng-click="lengthSwitch=true">
            <img src="images/charts.png">
        </md-button>
    </div>
    <div style="text-align: center">
        <h3 style="margin-top:0;font-size:large;font-weight:bold;color:black" ng-show='!lengthSwitch'>
         {{date.startTime | date : 'yyyy-MM-dd'}} 至  {{date.endTime | date : 'yyyy-MM-dd'}} 卡资源状态统计
      </h3>
        <h3 style="margin-top:0;font-size:large;font-weight:bold;color:black" ng-show='lengthSwitch'>
         {{date.startTime | date : 'yyyy-MM-dd'}} 至  {{date.endTime | date : 'yyyy-MM-dd'}} 卡资源状态统计占比
      </h3>
    </div>
    <div class="table-info" ng-show='!lengthSwitch'>
        <div>
            <div class="table-detail">
                <div class="t_r">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th width="10%">归属地</th>
                                <th width="10%">卡总数</th>
                                <th width="10%">预约卡数量</th>
                                <th width="10%">在用卡数量</th>
                                <th width="10%">预消户卡数量</th>
                                <th width='10%'>销户卡数量</th>
                                <th width='10%'>注销卡数量</th>
                                <th width='10%'>无效卡数量</th>
                                <th width='10%'>预占卡数量</th>
                                <th width='10%'>卡用卡数量</th>
                                <th width='10%'>状态分布日期</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in items">
                                <td width="10%">{{item.provinceName}}</td>
                                <td width="10%">{{item.total}}</td>
                                <td width="10%">{{item.reservationCard}}</td>
                                <td width="10%">{{item.validCard}}</td>
                                <td width="10%">{{item.prepareLogoutUser }}</td>
                                <td width="10%">{{item.logoutUser }}</td>
                                <td width="10%">{{item.logoutCard}}</td>
                                <td width="10%">{{item.nullityCard}}</td>
                                <td width="10%">{{item.priorityCard}}</td>
                                <td width="10%">{{item.cardUseCard}}</td>
                                <td width="10%">{{date.endTime | date :'yyyyMMdd'}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div id="pboss" style='height:550px;padding-bottom:20px'></div>
    </div>
    <div ng-show='lengthSwitch===true' id="main" style="height:400px"></div>
</div>
